<template>
    <div>
        <div class="register-form">
            <van-cell-group>
                <van-field
                    label="用户"
                    v-model="regForm.name"
                    type="text"
                    placeholder="请输入用户"
                />

                <van-field
                    label="密码"
                    v-model="regForm.password"
                    type="password"
                    placeholder="请输入密码"
                />

                <van-field
                    label="确认"
                    v-model="regForm.password2"
                    type="password"
                    placeholder="请确认密码"
                />

                <van-field
                    label="邮箱"
                    v-model="regForm.email"
                    type="email"
                    placeholder="请输入邮箱"
                />

                <van-radio-group v-model="regForm.type" direction="horizontal" class="margin-top">
                    <van-radio name="buyer">买家</van-radio>
                    <van-radio name="seller">卖家</van-radio>
                </van-radio-group>

                <van-row class="margin-top">
                    <van-col offset="2" span="6">
                        <van-button @click="onClickRegister" type="primary" size="small" text="注册"/>
                    </van-col>
                    <van-col offset="2" span="6">
                        <van-button @click="$router.back()" type="primary" size="small" text="返回"/>
                    </van-col>
                </van-row>
            </van-cell-group>
            <div class="content-padded">
                <p>注册成功后的用户可用于登录</p>
            </div>
        </div>
    </div>
</template>

<script>
import {Button, Field, CellGroup, Radio, RadioGroup, Row, Col} from "vant";
import {register} from "@/api/user.js";

export default {

    components: {
        [Row.name]: Row,
        [Col.name]: Col,
        [Button.name]: Button,
        [Field.name]: Field,
        [CellGroup.name]: CellGroup,
        [Radio.name]: Radio,
        [RadioGroup.name]: RadioGroup
    },
    data() {
        return {
            regForm: {
                name: "",
                password: "",
                password2: "",
                email: "",
                type: "buyer"
            },
        };
    }
    ,
    methods: {
        async onClickRegister() {
            if (this.regForm.name === "") {
                this.$toast("用户不能为空");
                return;
            } else if (this.regForm.password === "") {
                this.$toast("密码不能为空");
                return;
            } else if (this.regForm.password != this.regForm.password2) {
                this.$toast("密码两次输入不一致");
                return;
            } else if (this.regForm.email === "") {
                this.$toast("邮箱不能为空");
                return;
            }

            try {
                let user = this.regForm;
                console.log(user)
                delete user.password2; //删除该临时的字段
                let result = await register(user);
                if (result.code === 1) {
                    this.$store.commit("user/setUser", result.data.user); //保存用户信息，还是处于未登录
                    await this.$router.push({name: "welcome"});
                }
            } catch (error) {
                await this.$dialog.alert({title: "注册失败", message: error});
            }
        }
        ,
    }
    ,
}
;
</script>

<style lang="less" scoped>
.content-padded {
    margin: 30px;
}

.register-form {
    text-align: center;
}

.margin-top {
    margin-top: 20px;
}
</style>

